<template>
    <div class="content">
        <div class="icon5"></div>
        <div class="icon4"></div>
        <div class="icon3"></div>
        <div class="icon2"></div>
        <div class="icon1"></div>
        <div class="circle one"></div>
        <div class="circle two"></div>
        <div class="wrap">
            <div class="left"></div>
            <div class="right">
                <h2>欢迎来到飞翔</h2>
                <!-- 登录盒子 -->
                <div class="login" v-if="log">
                    <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
                        <el-form-item prop="username">
                            <el-input
                                v-model="loginForm.username"
                                prefix-icon="el-icon-user-solid"
                                placeholder="请输入账号"
                                class="account"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                placeholder="请输入密码"
                                v-model="loginForm.password"
                                prefix-icon="el-icon-unlock"
                                show-password
                                class="pwd"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="login-tip">
                        <p @click="resetLoginForm">密码登录</p>
                        <p>自动登录</p>
                    </div>
                    <el-button class="login-btn sure_btn" @click="login">登录</el-button>
                    <div class="reg-tip">
                        <p @click="regTip">没有账号？免费注册 ></p>
                    </div>
                </div>
                <!-- 注册盒子 -->
                <div class="reg" v-show="!log">
                    <el-form ref="regFormRef" :model="regForm" :rules="regFormRules">
                        <el-form-item prop="account">
                            <el-input
                                v-model="regForm.account"
                                prefix-icon="el-icon-user-solid"
                                placeholder="请输入账号"
                                class="account"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password2">
                            <el-input
                                placeholder="设置登录密码,不少于5位"
                                v-model="regForm.password2"
                                prefix-icon="el-icon-unlock"
                                show-password
                                class="pwd2"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="password3">
                            <el-input
                                placeholder="确认登录密码"
                                v-model="regForm.password3"
                                prefix-icon="el-icon-unlock"
                                show-password
                                class="pwd2"
                                @change="psw2change"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <button class="reg-btn sure_btn" @click="next">自动登录</button>
                    <div class="log-tip">
                        <p @click="regTip">返回登录</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Api from "../../api/login";
import Cookie from "../../utils/cookieUtils";

export default {
    methods: {
        regTip() {
            this.log = !this.log;
            if (this.$refs.loginFormRef) {
                this.$refs.loginFormRef.resetFields();
            }
            if (this.$refs.regFormRef) {
                this.$refs.regFormRef.resetFields();
            }
        },
        //点击密码登录，重置表单
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields();
        },
        // 登录验证
        login() {
            this.$refs.loginFormRef.validate(async (valid) => {
                // console.log(valid);
                if (!valid) return; // 格式有误  不允许登录
                Api.loginApi({
                    user: this.loginForm.username,
                    pwd: this.loginForm.password,
                }).then(({ code, msg }) => {
                    if (code == 200) {
                        this.$message.success(msg);
                        Api.getInfoApi({ user: this.loginForm.username }).then(
                            ({ type }) => {
                                Cookie.setToken("user", this.loginForm.username);
                                Cookie.setToken("type", encodeURIComponent(type));
                                setTimeout(() => {
                                    this.$router.push("/layout/home");
                                }, 400);
                            }
                        );
                    } else {
                        this.$message.error(msg);
                    }
                });

                //   拿到用户输入的账号密码  与localStorage 存储数据做比较 如果存在 即认可
                // 1.拿到 localStorage 里的数据
                // let userData =
                //     JSON.parse(localStorage.getItem("userData")) || this.userList;
                // // 2 . 开始对比
                // let params = {};
                // let flag = false;
                // let flag1 = false;
                // userData.forEach((element) => {
                //     // 2.1 校验用户名有没有被注册
                //     if (element.name == this.loginForm.username) {
                //         flag = true;
                //         // 2.2 用户名正确的情况下 校验密码输的对不对
                //         if (element.pwd == this.loginForm.password) {
                //             // 由于数据没有存到库里  所以当校验通过时 造一个假数据调接口
                //             params = {
                //                 username: "admin",
                //                 password: "123456",
                //             };
                //         } else {
                //             flag1 = true;
                //             this.$message.error("密码错误");
                //         }
                //     }
                // });
                // if (!flag) {
                //     this.$message.error("用户名不存在");
                //     return;
                // }
                // if (flag1) {
                //     return;
                // }

                // // console.log(11111);
                // // const { data: res } = await this.$http.post("login", params);
                // // if (res.meta.status !== 200)
                // //     return this.$message.error("输入错误，请重新输入");
                // this.$message.success("登录成功");
                // this.$router.push("/layout/home");
            });
        },


        // shijiao() {
        //   console.log("检查事件有没有生效");
        //   // // 3.2 校验用户名有没有被注册过  forEach里 不能用return 终止函数的执行
        //   let flag = false;
        //   //  注意： 这里的userData 未被定义
        //   let userData =
        //     JSON.parse(localStorage.getItem("userData")) || this.userList;
        //   userData.forEach((element) => {
        //     if (element.name == this.regForm.account) {
        //       flag = true;
        //       this.$confirm("该用户名已有心仪的小主了");
        //       this.regForm.account = "";
        //     }
        //   });
        //   // if (flag) return;
        // },


        next() {
            //1、校验表单是否输入完整
            this.$refs.regFormRef.validate(async (valid) => {
                // console.log(valid);
                if (valid) {
                    // 2、表单值都填了  校验密码对不对
                    if (!this.errorFlag) {
                        Api.registerApi({
                            user: this.regForm.account,
                            pwd: this.regForm.password2,
                        }).then(({ code, msg }) => {
                            if (code == 200) {
                                this.$message.success(msg);
                                Api.getInfoApi({ user: this.regForm.account }).then(
                                    ({ type }) => {
                                        Cookie.setToken("user", this.regForm.account);
                                        Cookie.setToken("type", encodeURIComponent(type));
                                        setTimeout(() => {
                                            this.$router.push("/layout/home");
                                        }, 400);
                                    }
                                );
                            } else {
                                this.$message.error(msg);
                            }
                        });

                        // 3、当校验通过  记录用户输入账号密码
                        //  3.1 先拿到之前所有的账号密码 JSON.parse-- localStorage存的值是object转的字符串
                        // let userData =
                        //   JSON.parse(localStorage.getItem("userData")) || this.userList;
                        // // // 3.2 校验用户名有没有被注册过  forEach里 不能用return 终止函数的执行
                        // // let flag = false;
                        // // userData.forEach((element) => {
                        // //   if (element.name == this.regForm.account) {
                        // //     flag = true;
                        // //     this.$confirm("该用户名已有心仪的小主了");
                        // //   }
                        // // });
                        // // if (flag) return;
                        // //  3.3 然后把用户输的账号密码 追加到该数组中去
                        // //  数据格式：{用户名（name）：'',密码 （pwd）: ''}
                        // userData.push({
                        //   name: this.regForm.account,
                        //   pwd: this.regForm.password2,
                        // });
                        // //  3.4 再次存入最新的数据到localStorage
                        // localStorage.setItem("userData", JSON.stringify(userData));
                        // this.loginForm.username = this.regForm.account;
                        // this.log = !this.log;
                        // this.regForm.account = "";
                        // this.regForm.password2 = "";
                        // this.regForm.password3 = "";
                    }
                }
            });
        },
        psw2change() {
            // 比较两者的值
            // 1. 取值  this.变量名
            // 2. 比较  用if
            if (this.regForm.password2 == this.regForm.password3) {
                // 一样就什么都不敢
                this.errorFlag = false;
            } else {
                // 不一样给提示报错
                this.errorFlag = true;
                this.$message.error("两次密码输入不一致");
            }
        },
    },
    data() {
        return {
            loginForm: { username: "", password: "" },
            regForm: { account: "", password2: "", password3: "" },
            account: "",
            pwd: "",
            log: true, //布尔值，不能加引号

            //这是表单验证规则
            loginFormRules: {
                //验证用户名是否合法
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                    {
                        min: 5,
                        max: 11,
                        message: "请输入正确的用户名",
                        trigger: "blur",
                    },
                ],
                //验证密码是否合法
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 5,
                        max: 15,
                        message: "输入错误，请重新输入",
                        trigger: "blur",
                    },
                ],
            },
            regFormRules: {
                //验证用户名是否合法
                account: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                    {
                        min: 5,
                        max: 11,
                        message: "请输入正确的用户名",
                        trigger: "blur",
                    },
                ],
                // //验证密码是否合法
                password2: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 5,
                        max: 15,
                        message: "输入错误，请重新输入",
                        trigger: "blur",
                    },
                ],
                password3: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 5,
                        max: 15,
                        message: "输入错误，请重新输入",
                        trigger: "blur",
                    },
                ],
            },
            errorFlag: false, // 用于标识密码是否一致
            userList: [
                {
                    name: "admin",
                    pwd: "123456",
                },
            ], // 用于存储注册的用户,给个默认账户
        };
    },
};
</script>

<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}

.content {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(68, 149, 252, 0.7);
    overflow: hidden;
}

.wrap {
    width: 720px;
    height: 500px;
    background-color: #fff;
    position: absolute;
    border-radius: 5%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    padding-top: 58px;

    .left {
        width: 420px;
        height: 381px;
        background: url(./img/denglu-chahua_03.png) no-repeat center;
        background-size: 75% 75%;
        padding-top: 10px;
    }
    .right {
        width: 420px;
        height: 381px;
        // background-color: green;
        box-sizing: border-box;
        padding-left: 42px;
        padding-right: 42px;

        h2 {
            margin-bottom: 66px;
            font-size: 30px;
            font-weight: 550;
            color: #3d8ffd;
            text-align: center;
        }
    }
}
.wrap .right .reg {
    position: relative;
    height: 300px;
    width: 100%;
    // background-color: skyblue;
    .log-tip {
        height: 20px;
        font-size: 16px;
        color: #519bfe !important;
        text-align: left;
        cursor: pointer;
    }
    // .reg-btn {
    //   width: 276px;
    //   height: 40px;
    //   background-color: #3d8ffd;
    //   color: #fff;
    //   font-weight: 550;
    //   border-radius: 10px;
    //   border: 0;
    //   margin-bottom: 60px;
    // }
    /deep/.el-form-item__error {
        margin-top: -13px;
    }
    .account {
        width: 276px;
        height: 38px;
        z-index: 99;
        margin-bottom: 20px;
        border-radius: 5%;

        /deep/.el-input__inner {
            height: 38px;
            border: 0;
            padding: 0 0 0 30px;
            border: 1px solid grey;
        }
    }

    .pwd,
    .pwd2 {
        width: 276px;
        height: 40px;
        z-index: 88;
        margin-bottom: 20px;
        // border: 1px solid grey;
        border-radius: 4px;

        /deep/ input {
            height: 40px;
            border: 0;
            border-radius: 4px;
            padding: 0 0 0 30px;
            border: 1px solid grey;
        }
    }
}

.wrap .right .login {
    height: 290px;
    width: 100%;
    // background-color: pink;
    // display: none;
    .login-btn {
        // width: 276px;
        // height: 40px;
        // background-color: #3d8ffd;
        // color: #fff;
        // font-weight: 550;
        // border-radius: 10px;
        // border: 0;
        // margin-bottom: 60px;
    }

    /deep/.el-form-item__error {
        margin-top: -13px;
    }

    .reg-tip {
        height: 20px;
        font-size: 16px;
        color: #519bfe !important;
        text-align: right;
        cursor: pointer;
    }
}
.wrap .right .login .login-tip {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    p {
        height: 20px;
        font-size: 16px;
        color: #519bfe;
        cursor: pointer;
    }
}
.wrap .right .login .account {
    width: 276px;
    height: 38px;
    z-index: 99;
    margin-bottom: 20px;
    // border: 1px solid grey;
    border-radius: 5%;

    /deep/ input {
        height: 38px;
        border: 0;
        padding: 0 0 0 30px;
        border: 1px solid grey;
    }
}
.wrap .right .login .pwd {
    width: 276px;
    height: 40px;
    z-index: 88;
    margin-bottom: 20px;
    border: 1px solid grey;
    border-radius: 4px;

    /deep/ input {
        height: 40px;
        border: 0;
        border-radius: 4px;
        padding: 0 0 0 30px;
    }
}
.wrap .icon5 {
    width: 100px;
    height: 100px;
    /* background-color: pink; */
    position: absolute;
    background: url(./img/5.png) no-repeat;
    background-size: 100% auto;

    opacity: 0.7;
    animation: moveIcon5 8s linear infinite;
}
.icon4 {
    width: 100px;
    height: 100px;
    /* background-color: pink; */
    position: absolute;
    background: url(./img/4.png) no-repeat;
    background-size: 100% auto;

    opacity: 0.7;
    animation: moveIcon4 8s linear infinite;
}
.icon3 {
    width: 100px;
    height: 100px;
    /* background-color: pink; */
    position: absolute;
    background: url(./img/3.png) no-repeat;
    background-size: 100% auto;

    opacity: 0.7;
    animation: moveIcon3 8s linear infinite;
}
.icon2 {
    width: 100px;
    height: 100px;
    /* background-color: pink; */
    position: absolute;
    background: url(./img/2.png) no-repeat;
    background-size: 100% auto;

    opacity: 0.7;
    animation: moveIcon2 8s linear infinite;
}
.icon1 {
    width: 100px;
    height: 100px;
    /* background-color: pink; */
    position: absolute;
    background: url(./img/1.png) no-repeat;
    background-size: 100% auto;

    opacity: 0.7;
    animation: moveIcon1 8s linear infinite;
}

.circle {
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.two {
    animation: scale 8s 2s linear infinite;
    background-color: rgba(169, 186, 208, 0.3);
}

.one {
    animation: scale 8s linear infinite;
    /* background-color: rgb(80, 156, 253); */
    background-color: rgba(169, 186, 208, 0.4);
}

@keyframes moveIcon4 {
    from {
        left: 100px;
        top: -100px;
    }

    to {
        left: 50%;
        top: 50%;
        /* transform: translate(-50%, -50%); */
    }
}
@keyframes moveIcon3 {
    from {
        right: 100px;
        top: 100px;
    }

    to {
        right: 50%;
        top: 50%;
        /* transform: translate(-100%, -100%); */
    }
}
@keyframes moveIcon2 {
    from {
        left: 100px;
        top: 280px;
    }

    to {
        left: 50%;
        top: 50%;
        /* transform: translate(-100%, -100%); */
    }
}

@keyframes moveIcon5 {
    from {
        left: 100px;
        bottom: 50px;
    }

    to {
        left: 50%;
        bottom: 30%;
        /* transform: translate(-50%, -50%); */
    }
}
@keyframes moveIcon1 {
    from {
        right: 100px;
        bottom: 50px;
    }

    to {
        right: 50%;
        bottom: 30%;
        /* transform: translate(-50%, -50%); */
    }
}

@keyframes scale {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.2);
    }
}
.sure_btn {
    width: 276px;
    height: 40px;
    margin-bottom: 60px;
    background-color: #3d8ffd;
    color: #fff;
    font-weight: 550;
    border-radius: 10px;
    border: 0;
}
</style>
<style>
body {
    width: 100%;
    height: 100%;
}
.mycointainer {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>